<script setup>



import {onMounted, reactive, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import axios from "axios";
import {CircleClose, CirclePlus, Download, RefreshRight, Search, Unlock} from "@element-plus/icons-vue";
import RoleInfoList from "./RoleInfoList.vue";
import RoleInfoAdd from "./RoleInfoAdd.vue";
import UserInfoList from "./UserInfoList.vue";



//========================================编辑======================================================================

// 表单验证规则
const rules = ref({
  roleName: [
    { required: true, message: '请输入职务名称', trigger: 'blur' }
  ],
  roleKey: [
    { required: true, message: '请输入职务编码', trigger: 'blur' }
  ]
});

// 创建一个引用以访问表单实例
const form = ref(null);

const visible4Edit = ref(false);
const role4Edit = ref({})
const editRole = () => {
  axios.put('/role/edit', role4Edit.value)
      .then(data => {
        visible4Edit.value = false;
        query();
        ElMessage.success('修改成功')
      })
      .catch(errorMsg => {
        ElMessage.error(errorMsg);
      })
}
const show4Edit = type => {
  visible4Edit.value = true;
  let jsonSt = JSON.stringify(type);
  role4Edit.value = JSON.parse(jsonSt);
}

//======================================删除========================================================================

const deleteType = type => {
  ElementPlus.ElMessageBox.confirm(
      `您确定要删除车辆类型：${type.typeName}吗？`,
      '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        axios.delete(`/carType/delete/${type.id}`)
            .then(() => {
              ElementPlus.ElMessage.success('删除成功!');
              query();
            })
            .catch(error => {
              ElementPlus.ElMessage.error(error);
            })
      })
      .catch(() => {
      })
}

// ===================================添加=====================================================================
const show4Add = () => {
  visible4Add.value = true;
}

// 添加成功后的回调方法
const handleAddSuccess = () => {
  query();
}




const visible4Add = ref(false);
// ===================================分页显示=========================================================
const reset = () => {
  role4Query.roleName='';
  role4Query.status=-1
}

const pageNum = ref(1);
const pageSize = ref(10);
const role4Query = reactive({
  roleName: '',
  status: -1,
  pageNum,
  pageSize
})
const roleInfos = ref([])
const query = () => {
  axios.post('/role/page', role4Query)
      .then(resp => {
        roleInfos.value = resp.data.records;
        total.value = resp.data.total;
        pageNum.value = resp.data.current;
      })
      .catch(errorMsg => {
        ElMessage.error(errorMsg);
      })
}


const total = ref(0)
const handleSizeChange = val => {
  pageSize.value = val;
  query();
}
const handleCurrentChange = val => {
  pageNum.value = val;

};
//===================================禁用角色========================================================================

const lockIds = ref([])
const batchLockIds = lockIdsData =>{
  lockIds.value = lockIdsData;
}

const batchDelete = () => {
  ElMessageBox.confirm(
      `您确定要批量禁用选中的职务吗？`,
      '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        axios.post('/role/batchLock/',lockIds.value)
            .then(() => {
              ElMessage.success('停用成功!');
              query();
            })
            .catch(error => {
              ElMessage.error(error.response.data);
            })
      })
}

//=============================启用角色======================================================================
const batchActivate = () => {
  ElMessageBox.confirm(
      `您确定要批量启用选中的职务吗？`,
      '警告',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        axios.post('/role/batchActivate/',lockIds.value)
            .then(() => {
              ElMessage.success('激活成功!');
              query();
            })
            .catch(error => {
              ElMessage.error(error.response.data);
            })
      })
}




// ====================================================================================================================

onMounted(() => {
  query();
})
</script>


<template>
  <el-row>
    <el-col :span="2">
      <div>
        <hr/>
      </div>
    </el-col>
    <el-col :span="2" style="text-align: center; color: #909399">
      <div>查询条件</div>
    </el-col>
    <el-col :span="20">
      <div>
        <hr/>
      </div>
    </el-col>
  </el-row>


  <el-form :model="role4Query">
    <el-row>
      <el-col :span="6">
        <el-form-item label="职务名" label-width="100">
          <el-input v-model="role4Query.roleName" size="small" autocomplete="off"/>
        </el-form-item>
      </el-col>

      <el-col :span="6" align="middle">
        <el-form-item label="状态" label-width="100">
          <el-radio-group v-model="role4Query.status">
            <el-radio :value=-1>全部</el-radio>
            <el-radio :value="0">正常</el-radio>
            <el-radio :value="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>


      </el-col>
      <el-col :span="2" class="center-content" :offset="1">
        <el-button type="primary" size="small" :icon="Search" round
                   @click="query()">查询
        </el-button>
      </el-col>
      <el-col :span="2" class="center-content">
        <el-button type="warning" size="small" :icon="RefreshRight" round
                   @click="reset()">重置
        </el-button>
      </el-col>


    </el-row>
  </el-form>

  <el-row>
    <el-col :span="24">
      <div>
        <hr style="border-color: #7a73f5;"/>
      </div>
    </el-col>
  </el-row>

  <el-row :gutter="10">
    <el-col :span="3">
      <div style=" display: flex;align-items: center; gap: 8px;">
        <el-icon size="25" color="#7a73f5"><List /></el-icon>  数据管理</div>
    </el-col>
    <el-col :span="2" :offset="14">
      <el-button type="primary" size="small" :icon="CirclePlus" round @click="show4Add">
        添加角色
      </el-button></el-col>
      <el-col :span="2">
        <el-button  type="danger" size="small" round @click="batchDelete()" :icon="CircleClose">批量停用</el-button>
      </el-col>
      <el-col :span="2">
        <el-button  type="success" size="small" round @click="batchActivate()" :icon="Unlock">批量启用</el-button>
      </el-col>

  </el-row>

  <el-row>
    <el-col :span="24">
      <div>
        <hr style="border-color: #7a73f5;"/>
      </div>
    </el-col>
  </el-row>

  <!-- ========================================分页查询====================================================================== -->
  <el-row>

<RoleInfoList :roleInfos="roleInfos" :pageNum="pageNum" :pageSize="pageSize" :total="total"
              @change-page="handleCurrentChange" @change-page-size="handleSizeChange"
              @show4EditData="show4Edit" @batchDelete="batchLockIds">

</RoleInfoList>

  </el-row>



  <!-- ========================================编辑弹窗====================================================================== -->
  <el-dialog v-model="visible4Edit" title="编辑车辆类型" width="400">
    <el-form :model="role4Edit" :rules="rules" ref="form">
      <el-form-item label="职务名称" label-width="100" prop="roleName">
        <el-input v-model="role4Edit.roleName" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="职务编码" label-width="100" prop="roleKey">
        <el-input v-model="role4Edit.roleKey" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="状态" label-width="100">
        <el-radio-group v-model="role4Edit.status">
          <el-radio :value="0">正常</el-radio>
          <el-radio :value="1">停用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" label-width="100">
        <el-input :rows="3" type="textarea" v-model="role4Edit.remark" autocomplete="off"/>
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible4Edit = false">取消</el-button>
        <el-button type="primary" @click="editRole()">确认</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- ========================================添加弹窗====================================================================== -->

<RoleInfoAdd  v-model:visible4-add="visible4Add" @cancel-add="query"  @add-success="handleAddSuccess"
              ></RoleInfoAdd>

</template>



<style scoped>


/* 使用 :deep() 穿透样式作用域 */
:deep(.el-table thead th) {
  background-color: #f5f7fa !important;
}


.el-row {
  margin-bottom: 20px;
}

.center-content {
  display: flex;
  justify-content: center; /* 水平居中 */
  margin-top: 3px;
}

</style>